<template>
  <div class="container-fluid H100 root" v-on:dragover.prevent v-on:drop.prevent="onDrop" v-on:click="debug">
    <div v-for="(item, i) in items" :key="i" v-on:click="selectRow(i)">
      <draggable element="div" v-model="item.data" :options="dragOptions" :move="onMove" @start="onStart" @end="isDragging=false">
        <transition-group class="row" type="transition" :class="{ rowSel: rowSelIndex==i }">
          <div v-for="(c, j) in item.data" :class="['col-'+c, 'node']" :key="j">

            <div :class="['view', viewSelId==item.ids[j] ? 'viewSel' : '']" v-bind:id="item.ids[j]" v-on:click="selectView">
              <span>{{item.ids[j]}}</span>
            </div>
            <!--<slot name="view"></slot>-->
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  // var idx = 0;

  export default {
    name: 'Center',
    components: {
      draggable
    },
    data: function () {
      return {
        count: 0,
        editable: true,
        delayedDragging: false,
        rowSelIndex: -1,
        viewSelId: '',
        rowSelMode: true,
        items: [
          // {
          //   ids: [],
          //   data: [6, 6]
          // },
          // {
          //   data: [4, 4, 4]
          // },
          // {
          //   data: [4, 4, 4]
          // }
        ]
      }
    },
    methods: {
      // 用于拖拽时即选中
      onStart: function (event) {
        var id = $(event.target).find('.view').attr('id');
        if (id!='') this.viewSelId = id;
        this.isDragging = true;
      },
      onMove: function ({relatedContext, draggedContext}) {
        const relatedElement = relatedContext.element;
        const draggedElement = draggedContext.element;
        return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;
      },
      onDrop: function (ev) {
        var str = ev.dataTransfer.getData('Text');
        if (str.indexOf('visual')===-1) return ;
        // 确定来源为容器
        var id = "view"+ (++this.count) + "_", ids = [];
        var sps = str.replace('visual', '').split(' ');
        var cols = sps.filter(function (d) { return d !== ''; })
          .map(function (d, i) {
            ids.push(id + i);
            return parseInt(d);
          });
        this.items.push({
          ids: ids,
          data: cols,
          maxId: cols.length
        });
      },
      selectRow: function (i) {
        if (!this.rowSelMode) this.rowSelIndex = i;
      },
      selectView: function (event) {
        this.viewSelId = event.target.id;
        console.log(this.viewSelId);
      },
      debug: function () {
        this.items.map(function (d) {
          console.log(d);
        });
        //

      }
    },
    computed: {
      dragOptions: function () {
        return {
          animation: 150,
          group: 'description',
          disabled: !this.editable,
          ghostClass: 'ghost',
          dragClass: 'dragClass'
        };
      }
    },
    watch: {
      isDragging: function (newValue) {
        if (newValue) {
          this.delayedDragging = true;
          return;
        }
        this.$nextTick(() => {
          this.delayedDragging = false;
        })
      }
    }
  }

</script>

<style scoped>
  .node{ min-height: 400px; margin:0px; padding:1px;border: 1px solid #eeeeee; }
  .view{
    width:100%;
    height:100%;

    border-radius:5px;
    -moz-border-radius:5px; /* 老的 Firefox */
  }
  .f{ float: left }
  .rowSel{ border:1px solid #28a745 }
  .viewSel{ border:1px solid #a94442 }
  .root{ padding-top:5px; }
  .ghost{ opacity:1; background-color: #eee }
  .dragClass { opacity:1; border:1px solid #a94442; background-color: #ddd }
</style>
